import {permissionList}  from '@/config/PermissionConfig'
import { ref, onMounted, useTemplateRef } from 'vue';
import {useTabBarConfigStore} from "./TabBarConfigStore"
import {storeToRefs} from 'pinia'
import {type R} from "@/types/R"
import {request} from "@/utils/Request"
import {ElMessage, ElMessageBox} from "element-plus"
import {type PageInfo} from "@/types/PageInfo"
import { TabBarType, type AppConfigDTO, type TabBar } from './TabBarConfigTypes';
import {randomId} from "@/utils/IdUtils"

export const useTabBarConfigHooks = function(){
    // 存储
    const tabBarConfigStore = useTabBarConfigStore()
    let {
        tabBarList,
        currentPage,
        disableTabBarList,
    } = storeToRefs(tabBarConfigStore)

    let selectLoading = ref<boolean>(false)

    onMounted(async ()=>{
        selectLoading.value = true
        let r:R<AppConfigDTO> = await request.post("/appConfig/getAppConfig")
        tabBarList.value = r.data.tabBarList
        disableTabBarList.value = r.data.disableTabBarList!
        tabBarList.value?.forEach(item=>{
            item.type = TabBarType.default
        })
        disableTabBarList.value?.forEach(item=>{
            item.type = TabBarType.disable
        })
        selectLoading.value = false

        let hasChoose:boolean = false
        tabBarList.value?.forEach(item=>{
            if(item.id == currentPage.value.id){
                hasChoose = true
            }
        })
        disableTabBarList.value?.forEach(item=>{
            if(item.id == currentPage.value.id){
                hasChoose = true
            }
        })

        if(hasChoose){

        }else{
            chooseTabBar(tabBarList.value![0])
        }
    })

    const chooseTabBar = (item:TabBar)=>{
        currentPage.value = item
    }

    const reset = async ()=>{
        selectLoading.value = true
        let r:R<AppConfigDTO> = await request.post("/appConfig/getAppConfig")
        tabBarList.value = r.data.tabBarList
        disableTabBarList.value = r.data.disableTabBarList!

        tabBarList.value?.forEach(item=>{
            item.type = TabBarType.default
        })
        disableTabBarList.value?.forEach(item=>{
            item.type = TabBarType.disable
        })

        chooseTabBar(tabBarList.value![0])
        selectLoading.value = false
    }

    const save = ()=>{
        ElMessageBox.confirm('确认保存吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(async()=>{
            let r:R<any> = await request.post("/appConfig/updateAppTabBarConfig", {
                tabBarList: tabBarList.value,
                disableTabBarList: disableTabBarList.value
            })
            if(r.code == "success"){
               ElMessage.success("保存成功")
            }
        })
    }

    const add = ()=>{
        let item =  {
            id: randomId(),
            path: "",
            image: "",
            activeImage: "",
            text: "文本",
            type: TabBarType.disable
        }
        if(!disableTabBarList.value){
            disableTabBarList.value = []
        }
        disableTabBarList.value!.push(item)
        chooseTabBar(item)
    }

    const remove = ()=>{
        
        ElMessageBox.confirm('确认删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(()=>{
            disableTabBarList.value!.splice(disableTabBarList.value!.indexOf(currentPage.value), 1)
            chooseTabBar(tabBarList.value![0])
        })
    }

    const moveLeft = ()=>{
        

        if(currentPage.value.type == TabBarType.default){
            if(tabBarList.value!.indexOf(currentPage.value) == 0){
                ElMessage.warning("已经是第一个")
                return
            }
            let index = tabBarList.value!.indexOf(currentPage.value)
            tabBarList.value!.splice(index, 1)
            tabBarList.value!.splice(index - 1, 0, currentPage.value)
            chooseTabBar(tabBarList.value![index - 1])
        }else if(currentPage.value.type == TabBarType.disable){
            if(disableTabBarList.value!.indexOf(currentPage.value) == 0){
                ElMessage.warning("已经是第一个")
                return
            }
            let index = disableTabBarList.value!.indexOf(currentPage.value)
            disableTabBarList.value!.splice(index, 1)
            disableTabBarList.value!.splice(index - 1, 0, currentPage.value)
            chooseTabBar(disableTabBarList.value![index - 1])
        }
    }
    const moveRight = ()=>{
        
        
        if(currentPage.value.type == TabBarType.default){
            if(tabBarList.value!.indexOf(currentPage.value) == tabBarList.value!.length - 1){
                ElMessage.warning("已经是最后一个")
                return
            }
            let index = tabBarList.value!.indexOf(currentPage.value)
            tabBarList.value!.splice(index, 1)
            tabBarList.value!.splice(index + 1, 0, currentPage.value)
            chooseTabBar(tabBarList.value![index + 1])
        }else if(currentPage.value.type == TabBarType.disable){
            if(disableTabBarList.value!.indexOf(currentPage.value) == disableTabBarList.value!.length - 1){
                ElMessage.warning("已经是最后一个")
                return
            }
            let index = disableTabBarList.value!.indexOf(currentPage.value)
            disableTabBarList.value!.splice(index, 1)
            disableTabBarList.value!.splice(index + 1, 0, currentPage.value)
            chooseTabBar(disableTabBarList.value![index + 1])
        }

        
    }

    const moveDisable = ()=>{
        if(tabBarList.value!.length == 1){
            ElMessage.warning("至少需要一个")
            return
        }

        let item:TabBar = currentPage.value
        tabBarList.value!.splice(tabBarList.value!.indexOf(item), 1)

        currentPage.value.type = TabBarType.disable
        if(!disableTabBarList.value){
            disableTabBarList.value = []
        }
        disableTabBarList.value!.push(currentPage.value)
    }

    const moveEable = ()=>{
        let item:TabBar = currentPage.value
        disableTabBarList.value!.splice(disableTabBarList.value!.indexOf(item), 1)
        currentPage.value.type = TabBarType.default
        tabBarList.value!.push(currentPage.value)
    }

    // const chooseDisableTabBar = (item:TabBar)=>{
    //     currentDisablePage.value = item
    // }

    const disableScrollRef = useTemplateRef<any>("disableScrollRef")
    const disableScrollDivRef = useTemplateRef<any>("disableScrollDivRef")
    // 临时记录滚动条位置
    let scrollLeft = ref<number>(0)
    // 监听鼠标滑轮事件
    onMounted(() => {
        try {
            (disableScrollDivRef.value! as any).addEventListener('wheel', (event: any) => {
                disableScrollRef.value!.handleScroll()
                scrollLeft.value += event.deltaY;
                disableScrollRef.value!.setScrollLeft(scrollLeft.value)
            });
        } catch (err) {
            console.error(err)
        }
    })

    return {
        tabBarList,
        currentPage,
        chooseTabBar,
        reset,
        save,
        selectLoading,
        add,
        remove,
        moveLeft,
        moveRight,
        disableTabBarList,
        moveDisable,
        moveEable,
        TabBarType,
    }
}